<fieldset>
  <legend>{{ text_transaction }}</legend>
  <div id="paypal-transaction"></div>
</fieldset>
<fieldset>
  <legend>{{ text_payment }}</legend>
  <table class="table table-bordered">
    <tr>
      <td>{{ text_capture_status }}</td>
      <td id="capture-status">{{ capture_status }}</td>
    </tr>
    <tr>
      <td>{{ text_amount_authorised }}</td>
      <td>{{ total }}
        {% if capture_status != 'Complete' %}
          &nbsp;&nbsp;&nbsp;
          <button type="button" id="button-void" data-loading="{{ text_loading }}" class="btn btn-danger">{{ button_void }}</button>
        {% endif %}</td>
    </tr>
    <tr>
      <td>{{ text_amount_captured }}</td>
      <td id="paypal-captured">{{ captured }}</td>
    </tr>
    <tr>
      <td>{{ text_amount_refunded }}</td>
      <td id="paypal-refund">{{ refunded }}</td>
    </tr>
  </table>
</fieldset>
{% if capture_status != 'Complete' %}
  <fieldset id="capture-form">
    <legend>{{ tab_capture }}</legend>
    <form id="paypal-capture">
      <div class="form-group row">
        <label class="col-sm-2 col-form-label" for="input-capture-amount">{{ entry_capture_amount }}</label>
        <div class="col-sm-10">
          <input type="text" name="amount" value="{{ capture_remaining }}" id="input-capture-amount" class="form-control"/>
        </div>
      </div>
      <div class="form-group row">
        <label class="col-sm-2 col-form-label" for="input-capture-complete">{{ entry_capture_complete }}</label>
        <div class="col-sm-10">
          <input type="checkbox" name="complete" value="1" id="input-capture-complete" class="form-control"/>
        </div>
      </div>
      <div class="float-right">
        <button type="button" id="button-capture" data-loading="{{ text_loading }}" class="btn btn-primary">{{ button_capture }}</button>
      </div>
    </form>
  </fieldset>
{% endif %}
<script type="text/javascript"><!--
$('#paypal-transaction').load('index.php?route=extension/payment/pp_express/transaction&user_token={{ user_token }}&order_id={{ order_id }}');

$('#button-capture').on('click', function() {
	$.ajax({
		url: 'index.php?route=extension/payment/pp_express/capture&user_token={{ user_token }}&order_id={{ order_id }}',
		type: 'post',
		dataType: 'json',
		data: 'amount=' + $('#input-capture-amount').val() + '&complete=' + ($('#paypal-capture-complete').prop('checked') == true ? 1 : 0),
		beforeSend: function() {
			$('#button-capture').button('loading');
		},
		complete: function() {
			$('#button-capture').button('reset');
		},
		success: function(json) {
			$('.alert-dismissible').remove();

			if (json['error']) {
				$('#paypal-capture').prepend('<div class="alert alert-danger alert-dismissible"><i class="fas fa-exclamation-circle"></i> ' + json['error'] + ' <button type="button" class="close" data-dismiss="alert">&times;</button></div>');
			}

			if (json['success']) {
				$('#paypal-capture').prepend('<div class="alert alert-success alert-dismissible"><i class="fas fa-exclamation-circle"></i> ' + json['success'] + ' <button type="button" class="close" data-dismiss="alert">&times;</button></div>');

				$('#paypal-captured').text(json['captured']);
				$('#paypal-capture-amount').val(json['remaining']);

				if (json['capture_status']) {
					$('#capture-status').text(json['capture_status']);

					$('#button-void').remove();

					$('#capture-form').remove();
				}
			}

			$('#paypal-transaction').load('index.php?route=extension/payment/pp_express/transaction&user_token={{ user_token }}&order_id={{ order_id }}');
		}
	});
});

$('#button-void').on('click', function() {
	if (confirm('{{ text_confirm_void|escape('js') }}')) {
		$.ajax({
			url: 'index.php?route=extension/payment/pp_express/void&user_token={{ user_token }}&order_id={{ order_id }}',
			dataType: 'json',
			beforeSend: function() {
				$('#button-void').button('loading');
			},
			complete: function() {
				$('#button-void').button('reset');
			},
			success: function(json) {
				$('.alert-dismissible').remove();

				if (json['error']) {
					$('#paypal-capture').prepend('<div class="alert alert-danger alert-dismissible"><i class="fas fa-exclamation-circle"></i> ' + json['error'] + ' <button type="button" class="close" data-dismiss="alert">&times;</button></div>');
				}

				if (json['success']) {
					$('#capture-status').text(json['capture_status']);

					$('#button-void').remove();

					$('#capture-form').remove();
				}

				$('#paypal-transaction').load('index.php?route=extension/payment/pp_express/transaction&user_token={{ user_token }}&order_id={{ order_id }}');
			}
		});
	}
});

$('#paypal-transaction').on('click', 'button', function() {
	var element = this;

	$.ajax({
		url: $(element).attr('href'),
		dataType: 'json',
		beforeSend: function() {
			$(element).button('loading');
		},
		complete: function() {
			$(element).button('reset');
		},
		success: function(json) {
			$('.alert-dismissible').remove();

			if (json['error']) {
				$('#tab-pp-express').prepend('<div class="alert alert-danger alert-dismissible"><i class="fas fa-exclamation-circle"></i> ' + json['error'] + ' <button type="button" class="close" data-dismiss="alert">&times;</button></div>');
			}

			if (json['success']) {
				$('#paypal-transaction').load('index.php?route=extension/payment/pp_express/transaction&user_token={{ user_token }}&order_id={{ order_id }}');
			}
		}
	});
});
//--></script>
